Skip to content

Add right-click context menu to canvas with Panels submenu and close button #3050

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add right-click context menu to canvas with Panels submenu and close button #3050

wants to merge 1 commit into from
+205 −90

Conversation

@devin-ai-integration
Copy link
Contributor

@devin-ai-integration devin-ai-integration bot commented Nov 10, 2025 •
edited by ellipsis-dev bot
Loading

Description

Implements a right-click context menu system for the canvas with a "Panels" submenu and adds a close button to the left panel.

Changes:

  • Wrapped the Canvas component with a context menu that appears on right-click
  • Added menu items:
    • "Add Element" (disabled placeholder)
    • "Add Component" (disabled placeholder)
    • "Panels" submenu with options to open: Layers, Brand, Pages, Images, Branches
    • Copy (⌘ C)
    • Paste (⌘ V)
  • Added onClose prop to LeftPanel and DesignPanel components
  • Added close button (X icon) in the upper right corner of the left panel content area
  • Repositioned left panel from left-0 to left-2 for better spacing

Related Issues

Link to Devin run: https://app.devin.ai/sessions/f53167fe6d834515acc03bfe0f22f16d
Requested by: [email protected]

Type of Change

  • Bug fix
  • New feature
  • Documentation
  • Refactor
  • Other (please describe):

Testing

⚠️ Not visually tested - Changes were implemented without running the application locally. Manual testing required to verify:

  1. Right-click on the canvas background shows the context menu
  2. "Panels" submenu expands and clicking each option opens the corresponding left panel tab
  3. Close button (X) appears in the upper right corner of the left panel content area
  4. Close button successfully closes the left panel when clicked
  5. Copy/Paste menu items trigger the correct editor actions
  6. Left panel positioning with left-2 looks correct
  7. Context menu doesn't conflict with existing right-click menus on frames/elements

Screenshots (if applicable)

N/A - Visual testing required

Additional Notes

Important review points:

  • "Add Element" and "Add Component" menu items are intentionally disabled placeholders (no functionality implemented)
  • Used Icons.ViewGrid instead of Icons.LayoutGrid and Icons.CrossS instead of Icons.Cross2 based on available icons in the component library
  • Copy/Paste handlers use void operator to handle promise returns correctly
  • One pre-existing lint warning about any type in the tabs array was not fixed (line 22 of design-panel/index.tsx)
  • The context menu wraps the entire Canvas component - verify this doesn't interfere with existing frame-level right-click menus

Testing priority:

  1. Verify context menu appears and functions correctly
  2. Test Panels submenu opens correct tabs
  3. Verify close button positioning and functionality
  4. Check for any visual regressions with left panel positioning

Important

Add right-click context menu to canvas with 'Panels' submenu and close button for left panel, requiring manual visual testing.

  • Context Menu:
    • Added right-click context menu to Canvas in main.tsx with 'Panels' submenu and copy/paste options.
    • 'Add Element' and 'Add Component' are disabled placeholders.
  • Left Panel:
    • Added onClose prop to LeftPanel and DesignPanel components.
    • Added close button (X icon) to DesignPanel.
    • Adjusted left panel position from left-0 to left-2 in main.tsx.
  • Misc:
    • Used Icons.ViewGrid and Icons.CrossS for menu and close button icons.
    • Copy/Paste handlers in main.tsx use void operator for promise handling.
    • Manual testing required for visual verification and functionality.

This description was created by Ellipsis for 6e09cf4. You can customize this summary. It will automatically update as commits are pushed.

@devin-ai-integration
Copy link
Contributor Author

devin-ai-integration bot commented Nov 10, 2025

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

  • Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
  • Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

  • Disable automatic comment and CI monitoring

@vercel
Copy link

vercel bot commented Nov 10, 2025 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Preview Comments Updated (UTC)
web Ready Ready Preview Comment Nov 10, 2025 7:04pm
1 Skipped Deployment
Project Deployment Preview Comments Updated (UTC)
docs Skipped Skipped Nov 10, 2025 7:04pm

@supabase
Copy link

supabase bot commented Nov 10, 2025

This pull request has been ignored for the connected project wowaemfasoptxrdjhilu because there are no changes detected in apps/backend/supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.

Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.

@coderabbitai
Copy link

coderabbitai bot commented Nov 10, 2025

Important

Review skipped

Bot user detected.

To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Comment @coderabbitai help to get the list of available commands and usage tips.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant